@extends('index.layouts.app')

@section('header')
    <link href="{{ asset('/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/admin/layui/css/layui.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/master.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/gloable.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/nprogress.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/blog.css') }}" rel="stylesheet" type="text/css">
    <style>
        .card-min-height {
            min-height: 270px;
            overflow: hidden;
            padding: 8px 4px;
        }

        .layui-col-md2-5 {
            width: 20%;
        }

        @media screen and (max-width: 400px) {
            .layui-col-md2-5 {
                width: 100%;
            }
        }

        .layui-carousel[lay-anim=updown] > [carousel-item] > *, .layui-carousel[lay-anim=fade] > [carousel-item] > * {
            left: 5px !important;
            top: 10px !important;
        }

        .layui-carousel .layui-carousel-ind {
            position: absolute;
            top: -41px;
            right: 51px;
            text-align: right;
        }

        .layui-card {
            margin-bottom: 0px;
        }

        .colum-height {
            min-height: 190px;
        }

        .card-style {
            margin: 4px;
            border-radius: 10px;
            min-height: 270px;
            box-shadow: 8px 10px rgba(60, 67, 82, 0.35);
            padding: 3px 3px 0 3px;
            background-color: rgba(255, 255, 255, 0.9);
        }

        .layui-card-header {
            position: relative;
            height: 60px;
            line-height: 60px;
            padding: 0 0px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
            font-size: 14px;
            top: 5px;
        }

        .layui-nav {
            position: relative;
            padding: 0 20px;
            background-color: #fff;
            color: #555;
            border-radius: 2px;
            font-size: 0;
            box-sizing: border-box;
        }
    </style>
@endsection
@section('content')
    <div class="doc-container" id="doc-container">
        <div class="container-fixed" style="width:100%">
            <div class="col-content" style="width:100%">
                <div class="inner">
                    <div class="layui-fluid" id="inventory">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-card-body layui-col-md12 ">
                                <div class="layui-col-md12" id="dp">
                                    大盘指数:@{{ indexs['zs'] }}&nbsp;&nbsp;&nbsp;@{{ indexs['per'] }}%&nbsp;&nbsp;&nbsp;@{{
                                    indexs['zd'] }}&nbsp;&nbsp;&nbsp;&nbsp;耗时：@{{reqDate}}ms
                                </div>
                                <div class="layui-col-md3 layui-col-md2-5  card-min-height"
                                     v-for="data_gp in data_stocks" style="min-width: 350px">
                                    <div class="layui-card card-style">
                                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 colum-height">
                                            <div>
                                                <span style="font-size: 18px">
                                                    <span>@{{data_gp[1]}}</span>
                                                </span>&nbsp;&nbsp;
                                                <span v-if="data_gp[31]>0"><span
                                                            class="layui-badge">@{{data_gp[3]}}</span></span>
                                                <span v-else><span
                                                            class="layui-badge layui-bg-green">@{{data_gp[3]}}</span></span>
                                            </div>
                                            <div>收/开 @{{data_gp[4]}}&nbsp;/&nbsp;@{{data_gp[5]}}</div>
                                            <div>低-高 @{{data_gp[34]}}&nbsp;/&nbsp;@{{data_gp[33]}}</div>
                                            <div>涨跌
                                                <span v-if="data_gp[31]>0">
                                                    <span class="layui-badge">@{{data_gp[31]}}</span>
                                                    <span class="layui-badge">@{{data_gp[32]}}%</span>
                                                </span>
                                                <span v-else>
                                                    <span class="layui-badge layui-bg-green">@{{data_gp[31]}}</span>
                                                    <span class="layui-badge layui-bg-green">@{{data_gp[32]}}%</span>
                                                </span>
                                            </div>

                                            <div>内/外盘 @{{data_gp[8]}}&nbsp;/&nbsp;@{{data_gp[7]}}</div>
                                            <div>换手率 @{{data_gp[38]}}</div>
                                            <div>市净率
                                                <i class="layui-icon alone-tips"
                                                   lay-tips="市净率指的是每股股价与每股净资产的比率。 市净率可用于股票投资分析，一般来说市净率较低的股票，投资价值较高，相反，则投资价值较低；但在判断投资价值时还要考虑当时的市场环境以及公司经营情况、盈利能力等因素。"></i>
                                                @{{data_gp[46]}}
                                            </div>
                                            <div>主 @{{data_gp['zllr']}}/@{{data_gp['zllc']}}</div>
                                            <div>内/外盘 @{{data_gp[8]}}/@{{data_gp[7]}}</div>
                                            <div>量比 @{{data_gp[49]}}</div>
                                        </div>

                                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 colum-height">
                                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                                @{{data_gp[9]}}--@{{data_gp[10]}}<br>@{{data_gp[11]}}--@{{data_gp[12]}}<br>@{{data_gp[13]}}--@{{data_gp[14]}}<br>@{{data_gp[15]}}--@{{data_gp[16]}}<br>@{{data_gp[17]}}--@{{data_gp[18]}}
                                            </div>
                                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                                @{{data_gp[19]}}--@{{data_gp[20]}}<br>@{{data_gp[21]}}--@{{data_gp[22]}}<br>@{{data_gp[23]}}--@{{data_gp[24]}}<br>@{{data_gp[25]}}--@{{data_gp[26]}}<br>@{{data_gp[27]}}--@{{data_gp[28]}}
                                            </div>

                                            <div>市盈率 <i class="layui-icon alone-tips"
                                                        lay-tips="市盈率（动）= 总市值/预估全年净利润。<br/>市盈率（静）=总市值/上年度净利润。<br/>动->低：说明预估净利润高"></i>
                                                @{{data_gp[39]}}
                                            </div>
                                            <div>(动/净) @{{data_gp[52]}}/@{{data_gp[53]}}</div>


                                            <div v-if="data_gp['zljlr']>0" style="color: #FF0000">主净入
                                                <span>@{{data_gp['zljlr']}}</span>
                                            </div>
                                            <div v-else style="color: rgb(58,168,98)">主净入
                                                <span>@{{data_gp['zljlr']}}</span>
                                            </div>
                                            <div>总市值 @{{data_gp[45]}}</div>
                                        </div>
                                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                            <a :href=" 'http://stockpage.10jqka.com.cn/HQ_v4.html#hs_'+data_gp[2]"
                                               target="_blank">
                                                <span class="layui-badge layui-bg-blue">k线</span>
                                            </a>
                                            &nbsp;&nbsp;
                                            <a :href=" '/cost_line?id='+data_gp[2]+'&name='+data_gp[1]" target="_blank">
                                                <span class="layui-badge layui-bg-blue">资金情况</span>
                                            </a>&nbsp;&nbsp;
                                            <a  v-on:click="add('/stock_forum?stock='+data_gp[2], 2)">
                                                <span class="layui-badge layui-bg-blue">论坛</span>&nbsp;&nbsp;
                                            </a>
                                            <a  v-on:click="add('https://m.baidu.com/sf?resource_id=5429&word='+data_gp[2]+'&ma_ver=2&pd=new_stock&openapi=1&from_sf=1', 1)">
                                                <span class="layui-badge layui-bg-blue">百度情况</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>


                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script src="{{ asset('/admin/layui/layui.js') }}"></script>
    <script src="{{ asset('/js/index/gloable.js') }}"></script>
    <script src="{{ asset('/js/index/nprogress.js') }}"></script>
    <script src="{{ asset('/js/index/pagecomment.js') }}"></script>
    <script>NProgress.start();</script>
    <script>
        window.onload = function () {
            NProgress.done();
        };
    </script>

    <script src="{{ asset('js/vue/vue.js') }}"></script>
    <script src="{{ asset('js/vue/axios.min.js') }}"></script>
    <script>
        layui.config({
            base: '../admin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'admin', 'carousel'], function () {
            var $ = layui.$
                , carousel = layui.carousel

        });//use

    </script>

    {{--<script>--}}
    {{--var app = new Vue({--}}
    {{--el: '#inventory',--}}
    {{--data() {--}}
    {{--return {--}}
    {{--data_stocks: [],--}}
    {{--message: '页面加载于 ' + new Date().toLocaleString(),--}}
    {{--indexs: ''--}}
    {{--}--}}
    {{--},--}}
    {{--mounted() {--}}
    {{--var that = this;--}}
    {{--axios.get("get_stock_real_time")--}}
    {{--.then(function (response) {--}}
    {{--that.data_stocks = response.data.data--}}
    {{--that.indexs = response.data.indexs--}}
    {{--})--}}
    {{--.catch(function (error) { // 请求失败处理--}}
    {{--console.log(error);--}}
    {{--});--}}
    {{----}}
    {{--setInterval(function () {--}}
    {{--axios.get("get_stock_real_time")--}}
    {{--.then(function (response) {--}}
    {{--that.data_stocks = response.data.data--}}
    {{--that.indexs = response.data.indexs--}}
    {{--document.title = "【" + that.indexs.zs + "    " + that.indexs.per + "%】";--}}
    {{--})--}}
    {{--.catch(function (error) { // 请求失败处理--}}
    {{--console.log(error);--}}
    {{--});--}}
    {{--}, 5000);--}}
    {{----}}
    {{--},--}}
    {{--methods: {--}}
    {{--add(obj, type) {--}}
    {{--if(type == 1 ){--}}
    {{--var area = ['450px', '750px'];--}}
    {{--}else {--}}
    {{--var area = ['1150px', '750px'];--}}
    {{--}--}}
    {{--layer.open({--}}
    {{--type: 2--}}
    {{--,title: '股票'--}}
    {{--,content: obj--}}
    {{--,maxmin: true--}}
    {{--,area: area--}}
    {{--,btn: ['确定', '取消']--}}
    {{--,yes: function(index, layero){--}}


    {{--}--}}
    {{--});--}}
    {{--}--}}
    {{--},--}}
    {{--})--}}
    {{--</script>--}}


    <script>
        var app = new Vue({
            el: '#inventory',
            data() {
                return {
                    data_stocks: [],
                    message: '页面加载于 ' + new Date().toLocaleString(),
                    indexs: '',
                    reqDate: 0
                }
            },
            mounted() {
                var that = this;
                // getSocket(
                //     `ws://192.168.10.10:9502`,
                //     'hello',
                //     (data, ws) => {
                //         console.log(data, ws);
                //
                //         // 保存数据对象, 以便发送消息
                //         this.wsData = ws;
                //     }
                // );

                var i = 1;
                getSocket(
                    `wss://www.han920.com:9502`,
                    // `ws://192.168.10.10:9502`,
                    '1',
                    (data, ws) => {
                        if (isJSON(data.data)) {
                            i++;
                            console.log(i);
                            var return_data = JSON.parse( data.data)
                            that.data_stocks = return_data.data
                            that.indexs = return_data.indexs
                            document.title = "【" + that.indexs.zs + "    " + that.indexs.per + "%】";

                        }else{
                            console.log( data.data )
                        }
                        // console.log(data.data );
                        // that.data_stocks = data.data
                    }
                );

                function isJSON(str) {
                    if (typeof str == 'string') {
                        try {
                            JSON.parse(str)
                            return true
                        } catch (e) {
                            return false
                        }
                    } else {
                        return false
                    }
                }

                function getSocket(url, params, callback) {
                    let socket;
                    if (typeof (WebSocket) === 'undefined') {
                        console.log('您的浏览器不支持WebSocket');
                    } else {
                        console.log('您的浏览器支持WebSocket');

                        // 初始化 WebSocket 对象，指定要连接的服务器地址与端口建立连接
                        socket = new WebSocket(url);

                        // console.log(socket);
                        // 打开事件

                        socket.onopen = function (sendDate) {
                            console.log('Socket 已打开');
                            socket.send(params);
                            setInterval(function () {
                                var sendDate = (new Date()).getTime();
                                var storage = window.sessionStorage
                                storage.setItem("sendDate",sendDate)

                                socket.send(params);
                                // console.log(sendDate);
                            }, 5000);
                        };

                        // 获得消息事件
                        socket.onmessage = function (msg) {
                            // 发现消息进入, 开始处理前端触发逻辑
                            var getDate = (new Date()).getTime();
                            // console.log(getDate);
                            var storage = window.sessionStorage
                            var str = storage.getItem("sendDate");
                            // console.log(getDate-str);
                            that.reqDate = getDate-str;
                            callback(msg, socket);
                        };

                        // 关闭事件
                        socket.onclose = function () {
                            console.log('Socket 已关闭');
                            alert('Socket 已关闭');
                        };

                        // 发生了错误事件
                        socket.onerror = function (e) {
                            console.log(e);
                            alert('Socket 发生了错误,请刷新页面');
                            // 此时可以尝试刷新页面
                        };
                    }
                }


            },
            methods: {
                add(obj, type) {
                    if(type == 1 ){
                        var area = ['450px', '750px'];
                    }else {
                        var area = ['1150px', '750px'];
                    }
                    layer.open({
                        type: 2
                        ,title: '股票'
                        ,content: obj
                        ,maxmin: true
                        ,area: area
                        ,btn: ['确定', '取消']
                        ,yes: function(index, layero){


                        }
                    });
                }
            },
        })
    </script>
@stop
